Modèle:Sticky header/Documentation
Ceci est la page de documentation de Modèle:Sticky header [modifier] [purger].
Cette sous-page contient les instructions et les catégories de son modèle d'origine et elle n'est pas destinée à être visualisée directement.
Ce modèle utilise la feuille de style Sticky header/styles.css en CSS. Voir l'aide de l'extension TemplateStyles si vous voulez en savoir plus.
Utilisation[modifier le code]
Ce modèle est destiné à forcer une fixation des en têtes de table de sorte que ces en-têtes restent lisibles en permanence à l'écran. Incluez ce modèle en ajoutant {{Sticky header}} ou sa redirection {{sticky header}} au-dessus d'un tableau. Puis, ajoutez l'une des classes suivantes au texte wiki de début de table:
| Class | Description |
|---|---|
sticky-header
|
Rendre la première rangée d'en-tête collante. |
sticky-header-multi
|
Rendre plusieurs lignes d'en-tête collantes en haut. Nécessite une table triable avec {| class="… sortable …". Evitez de l'utiliser avec la classe sorttop qui devient collante après tri. Évitez de créer des lignes d'en-tête trop hautes qui pourraient bloquer trop de données sur les écrans courts (par exemple, affichage paysage sur mobile).
|
Paramètres[modifier le code]
Description du modèle à compléter.
| Paramètre | Description | Type | État | |||
|---|---|---|---|---|---|---|
| Aucun paramètre spécifié | ||||||
Exemples[modifier le code]
Ligne d'en-tête collante unique[modifier le code]
La classe sticky-header est utilisée pour rendre collante la première ligne d’en-tête. Le tri n’est pas obligatoire.
| Mois | Tri1 | Tri2 |
|---|---|---|
| janvier | 1 | 24 |
| février | 2 | 23 |
| mars | 3 | 22 |
| avril | 4 | 21 |
| mai | 5 | 20 |
| juin | 6 | 19 |
| juillet | 7 | 18 |
| août | 8 | 17 |
| septembre | 9 | 16 |
| octobre | 10 | 15 |
| novembre | 11 | 14 |
| décembre | 12 | 13 |
| janvier | 13 | 12 |
| février | 14 | 11 |
| mars | 15 | 10 |
| avril | 16 | 9 |
| mai | 17 | 8 |
| juin | 18 | 7 |
| juillet | 19 | 6 |
| août | 20 | 5 |
| septembre | 21 | 4 |
| octobre | 22 | 3 |
| novembre | 23 | 2 |
| décembre | 24 | 1 |
| Total | 26 | 30 |
{{Sticky header}}
{| class="wikitable sticky-header alternance collapsible"
|+ Sous-titre de tableau
! Mois !! Tri1 !! Tri2
|-
| janvier || 1 || 24
|-
| février || 2 || 23
|-
| mars || 3 || 22
|-
| avril || 4 || 21
|-
| mai || 5 || 20
|-
| juin || 6 || 19
|-
| juillet || 7 || 18
|-
| août || 8 || 17
|-
| septembre || 9 || 16
|-
| octobre || 10 || 15
|-
| novembre || 11 || 14
|-
| décembre || 12 || 13
|-
| janvier || 13 || 12
|-
| février || 14 || 11
|-
| mars || 15 || 10
|-
| avril || 16 || 9
|-
| mai || 17 || 8
|-
| juin || 18 || 7
|-
| juillet || 19 || 6
|-
| août || 20 || 5
|-
| septembre || 21 || 4
|-
| octobre || 22 || 3
|-
| novembre || 23 || 2
|-
| décembre || 24 || 1
|- class=sortbottom
| '''Total''' || 26 || 30
|}
Plusieurs lignes d'en-tête collantes[modifier le code]
La classe sticky-header-multi est utilisée pour rendre plusieurs lignes d’en-tête collantes. Une table sortable est requise car la table triable est actuellement le seul moyen de déplacer des lignes consécutives d'en-têtes de colonnes vers l'élément <thead> . Si certaines ou toutes les colonnes ne doivent pas être triables, alors class=unsortable peut être placé dans la cellule d'en-tête avec l'icône de tri. Le dessus de la table sera toujours collant. Voir Aide Tableaux triables. Si JavaScript est désactivé, alors sortable et cette solution ne fonctionnerons pas.
Évitez d'utiliser la classe sorttop car sortable déplace ces lignes dans l'élément <thead> après le tri, ce qui les rend également très collantes. Une solution pourrait être de les déplacer vers le bas et d'utiliser la classe sortbottom à la place.
| Mois | Couleur | Données | ||
|---|---|---|---|---|
| info1 | info2 | info3 | ||
| janv-00 | blanc | a | α | あ |
| févr-00 | noir | b | β | か |
| mars-00 | rose | c | γ | さ |
| avr-00 | blanc | d | δ | た |
| mai-00 | noir | e | ε | な |
| juin-00 | rose | a | ζ | は |
| juil-00 | blanc | b | η | ま |
| août-00 | noir | c | θ | や |
| sept-00 | rose | d | ι | ら |
| oct-00 | blanc | e | κ | わ |
| nov-00 | noir | a | λ | い |
| déc-00 | rose | b | μ | き |
| janv-01 | blanc | c | ν | し |
| févr-01 | noir | d | ξ | ち |
| mars-01 | rose | e | ο | に |
| avr-01 | blanc | a | π | ひ |
| mai-01 | noir | b | ρ | み |
| juin-01 | rose | c | σ | り |
| juil-01 | blanc | d | α | う |
| août-01 | noir | e | β | く |
| sept-01 | rose | a | γ | す |
| oct-01 | blanc | b | δ | つ |
| nov-01 | noir | c | ε | ぬ |
| déc-01 | rose | d | ζ | ふ |
| nombre de valeur différente | 3 | 5 | 24 | 24 |
{{Sticky header}}
{| class="wikitable collapsible sortable alternance sticky-header-multi"
|+ Démonstration en cas de double en-têtes
! rowspan=2|Mois
! rowspan=2|Couleur
! colspan=3|Données
|-
! info1
! info2
! class="unsortable" | info3
|-
! janv-00
| blanc || a || α || あ
|-
! févr-00
| noir || b || β || か
|-
! mars-00
| rose || c || γ || さ
|-
! avr-00
| blanc || d || δ || た
|-
! mai-00
| noir || e || ε || な
|-
! juin-00
| rose || a || ζ || は
|-
! juil-00
| blanc || b || η || ま
|-
! août-00
| noir || c || θ || や
|-
! sept-00
| rose || d || ι || ら
|-
! oct-00
| blanc || e || κ || わ
|-
! nov-00
| noir || a || λ || い
|-
! déc-00
| rose || b || μ || き
|-
! janv-01
| blanc || c || ν || し
|-
! févr-01
| noir || d || ξ || ち
|-
! mars-01
| rose || e || ο || に
|-
! avr-01
| blanc || a || π || ひ
|-
! mai-01
| noir || b || ρ || み
|-
! juin-01
| rose || c || σ || り
|-
! juil-01
| blanc || d || α || う
|-
! août-01
| noir || e || β || く
|-
! sept-01
| rose || a || γ || す
|-
! oct-01
| blanc || b || δ || つ
|-
! nov-01
| noir || c || ε || ぬ
|-
! déc-01
| rose || d || ζ || ふ
|}
Voir aussi[modifier le code]
- La documentation anglaise plus complète : en:Template:Sticky header
